<template>
  <div class="home">
    <div class="mask" v-if="isLoading">
      <h2 class="mask-text">正在计算中。。。请勿刷新页面，否则数据可能丢失</h2>
    </div>
    <div class="caption">
      <h2 class="title">异常电压配变明细</h2>
      <el-button type="success" @click="xlsx">全量导出</el-button>
      <!-- <el-link href="http://localhost:8081/dw/system/dwsumt/export" type="primary" class="mylink">全量导出</el-link> -->
      <el-button type="success" @click="doxlsx">导出当前数据</el-button>
      <el-date-picker class="mydatepicker" value-format="yyyy-MM-dd" v-model="dateValue" type="date"
        placeholder="时间选择"></el-date-picker>
      <el-input v-model="form.mx" placeholder="输入母线名称" class="myinput"></el-input>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button @click="clearQuery">取消</el-button>
      <el-button @click="$router.push('/count')">统计</el-button>
      <el-button @click="tally">计算</el-button>
      <el-button @click="clear">重置</el-button>
    </div>
    <el-table :data="tableList" v-if="tableList.length > 0" class="mytable" id="myTable">
      <el-table-column align="center" prop="tqbh" width="110" label="台区编号" fixed>
        <template slot-scope="scope">
          <span id="myspan">{{ scope.row.tqbh }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tqmc" width="160" label="台区名称" fixed>
        <template slot-scope="scope">
          <span id="myspan">{{ scope.row.tqmc }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="00:00">
        <el-table-column align="center" prop="low00" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low00 < 205 && scope.row.low00 > 1 }">{{ scope.row.low00
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high00" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high00 > 235 }">{{ scope.row.high00 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="01:00">
        <el-table-column align="center" prop="low01" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low01 < 205 && scope.row.low01 > 1 }">{{ scope.row.low01
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high01" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high01 > 235 }">{{ scope.row.high01 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="02:00">
        <el-table-column align="center" prop="low02" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low02 < 205 && scope.row.low02 > 1 }">{{ scope.row.low02
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high02" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high02 > 235 }">{{ scope.row.high02 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="03:00">
        <el-table-column align="center" prop="low03" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low03 < 205 && scope.row.low03 > 1 }">{{ scope.row.low03
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high03" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high03 > 235 }">{{ scope.row.high03 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="04:00">
        <el-table-column align="center" prop="low04" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low04 < 205 && scope.row.low04 > 1 }">{{ scope.row.low04
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high04" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high04 > 235 }">{{ scope.row.high04 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="05:00">
        <el-table-column align="center" prop="low05" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low05 < 205 && scope.row.low05 > 1 }">{{ scope.row.low05
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high05" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high05 > 235 }">{{ scope.row.high05 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="06:00">
        <el-table-column align="center" prop="low06" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low06 < 205 && scope.row.low06 > 1 }">{{ scope.row.low06
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high06" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high06 > 235 }">{{ scope.row.high06 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="07:00">
        <el-table-column align="center" prop="low07" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low07 < 205 && scope.row.low07 > 1 }">{{ scope.row.low07
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high07" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high07 > 235 }">{{ scope.row.high07 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="08:00">
        <el-table-column align="center" prop="low08" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low08 < 205 && scope.row.low08 > 1 }">{{ scope.row.low08
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high08" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high08 > 235 }">{{ scope.row.high08 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="09:00">
        <el-table-column align="center" prop="low09" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low09 < 205 && scope.row.low09 > 1 }">{{ scope.row.low09
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high09" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high09 > 235 }">{{ scope.row.high09 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="10:00">
        <el-table-column align="center" prop="low10" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low10 < 205 && scope.row.low10 > 1 }">{{ scope.row.low10
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high10" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high10 > 235 }">{{ scope.row.high10 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="11:00">
        <el-table-column align="center" prop="low11" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low11 < 205 && scope.row.low11 > 1 }">{{ scope.row.low11
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high11" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high11 > 235 }">{{ scope.row.high11 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="12:00">
        <el-table-column align="center" prop="low12" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low12 < 205 && scope.row.low12 > 1 }">{{ scope.row.low12
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high12" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high12 > 235 }">{{ scope.row.high12 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="13:00">
        <el-table-column align="center" prop="low13" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low13 < 205 && scope.row.low13 > 1 }">{{ scope.row.low13
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high13" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high13 > 235 }">{{ scope.row.high13 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="14:00">
        <el-table-column align="center" prop="low14" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low14 < 205 && scope.row.low14 > 1 }">{{ scope.row.low14
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high14" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high14 > 235 }">{{ scope.row.high14 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="15:00">
        <el-table-column align="center" prop="low15" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low15 < 205 && scope.row.low15 > 1 }">{{ scope.row.low15
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high15" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high15 > 235 }">{{ scope.row.high15 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="16:00">
        <el-table-column align="center" prop="low16" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low16 < 205 && scope.row.low16 > 1 }">{{ scope.row.low16
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high16" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high16 > 235 }">{{ scope.row.high16 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="17:00">
        <el-table-column align="center" prop="low17" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low17 < 205 && scope.row.low17 > 1 }">{{ scope.row.low17
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high17" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high17 > 235 }">{{ scope.row.high17 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="18:00">
        <el-table-column align="center" prop="low18" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low18 < 205 && scope.row.low18 > 1 }">{{ scope.row.low18
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high18" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high18 > 235 }">{{ scope.row.high18 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="19:00">
        <el-table-column align="center" prop="low19" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low19 < 205 && scope.row.low19 > 1 }">{{ scope.row.low19
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high19" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high19 > 235 }">{{ scope.row.high19 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="20:00">
        <el-table-column align="center" prop="low20" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low20 < 205 && scope.row.low20 > 1 }">{{ scope.row.low20
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high20" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high20 > 235 }">{{ scope.row.high20 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="21:00">
        <el-table-column align="center" prop="low21" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low21 < 205 && scope.row.low21 > 1 }">{{ scope.row.low21
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high21" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high21 > 235 }">{{ scope.row.high21 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="22:00">
        <el-table-column align="center" prop="low22" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low22 < 205 && scope.row.low22 > 1 }">{{ scope.row.low22
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high22" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high22 > 235 }">{{ scope.row.high22 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="23:00">
        <el-table-column align="center" prop="low23" label="最低电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'low': scope.row.low23 < 205 && scope.row.low23 > 1 }">{{ scope.row.low23
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="high23" label="最高电压">
          <template slot-scope="scope">
            <span id="myspan" :class="{ 'high': scope.row.high23 > 235 }">{{ scope.row.high23 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="date" width="120" label="时间" fixed="right">
        <template slot-scope="scope">
          <span id="myspan">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="gddw" width="160" label="显示供电单位" fixed="right">
        <template slot-scope="scope">
          <span id="myspan">{{ scope.row.gddw }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="mx" width="140" label="母线" fixed="right">
        <template slot-scope="scope">
          <span id="myspan">{{ scope.row.mx }}</span>
        </template>
      </el-table-column>
    </el-table>
    <h3 v-else>暂无数据</h3>
    <el-pagination class="mypagination" layout="total,sizes,prev,pager,next,jumper" :page-size="form.pageSize"
      :current-page="form.pageNum" :page-sizes="[5, 10, 15, 20, 100, 200, 500]" :total="total" background
      @current-change="changePage($event)" @size-change="changePageSize"></el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";
import * as XLSX from "xlsx";
let date = new Date()
let year = date.getFullYear().toString()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let getDate = `${year}-${month}-${day}`
export default {
  data() {
    return {
      tableList: [],
      form: {
        tqbh: "",
        pageSize: 10,
        pageNum: 1,
        mx: '',
        // date:getDate,
        data: '',
      },
      dateValue: '',
      total: 0,
      isLoading: false,
      timePick: '',
    }
  },
  mounted() {
    if (this.$route.params && this.$route.params.str) {
      const that = this
      let params = {
        tqbhs: this.$route.params.str,
      }
      httpApi.list.queryList(params).then((res) => {
        if (res.status == 200) {
          that.tableList = res.data.rows
        }
      })
    } else {
      this.list()
    }
  },
  computed: {
  },
  methods: {
    list() {
      const that = this
      let params = this.form
      httpApi.list.queryList(params).then((res) => {
        if (res.data.code == 0) {
          that.tableList = res.data.rows
          this.total = res.data.total
        }
      })
    },
    changePage(page) {
      this.form.pageNum = page
      this.list()
    },
    changePageSize(val) {
      console.log('改变了每页显示的数据', val)
      this.form.pageSize = val
      this.list()
    },
    query() {
      this.form.date = this.dateValue
      this.list()
    },
    clearQuery() {
      this.dateValue = ''
      this.form.mx = ''
      this.form.date = getDate
      this.list()
    },
    doxlsx() {
      var workbook = XLSX.utils.book_new();
      let tableDom = document.getElementById("myTable").cloneNode(true);
      try {
        let ws = XLSX.utils.table_to_sheet(tableDom);
        XLSX.utils.book_append_sheet(workbook, ws, "Sheet1");
        XLSX.writeFile(workbook, "明细.xlsx", {
          bookType: "xlsx",
          type: "array",
        });
      } catch (e) {
        this.$message.error("导出失败");
      }
    },
    xlsx() {
      window.location = 'http://localhost:8081/dw/system/dwsumt/export'
    },
    tally() {
      if (this.isLoading) return
      const that = this
      this.isLoading = true
      httpApi.list.tally().then(res => {
        try {
          alert(res.data)
          that.isLoading = false
        } catch {
          that.isLoading = false
        }
      })
    },
    clear() {
      httpApi.list.clear().then(res => {
        try {
          alert(res.data)
        } catch {
        }
      })
    },
  },
}
</script>
<style scope>
.title {
  margin: 20px 0;
}

.caption {
  margin-bottom: 20px;
}

.mydatepicker {
  margin-left: 10px;
}

.myinput {
  width: 200px;
  margin: 0 10px;
}

.mypagination {
  margin: 20px 0;
}

.low {
  background-color: red;
  color: #fff;
  display: block;
  width: 100%;
}

.high {
  background-color: yellow;
  display: block;
  width: 100%;
}

.el-table__cell {
  padding: 0 !important;
}

.cell {
  padding: 0 !important;
}

#myspan {
  padding: 12px 0 !important;
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  display: block;
}

.mytable {
  height: fit-content;
}

.table-title .cell {
  padding-left: 200px !important;
}

.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.mask-text {
  position: relative;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.clearbtn {
  margin-left: 20px;
}
.mylink{
  margin-right: 10px;
}
</style>
